<script setup lang="ts">
import { requiredCheck, singleIpCheck, singleIpCheckFun, validatePortCheck } from "@/utils/verify";
import { ref } from "vue";
import { addData, editData } from "@/api/modules/control-strategy/access-control";

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增",
  rowData: undefined
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    name: [...requiredCheck("请选择线路")],
    ipproto: [...requiredCheck("请选择协议")],
    sip: [
      ...requiredCheck("请输入源IP"),
      {
        validator: (rule, value, callback) => {
          const testOne =
            /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|[12]?[0-9])$/;
          const rangeRegex =
            /^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)-((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;
          if(value?.includes("-")) {
            callback("IP格式错误");
          }
          if (value?.includes("/")) {
            if (testOne.test(value)) {
              callback();
            } else {
              callback("IP格式错误");
            }
          }
          if (singleIpCheckFun(value)) {
            callback();
          } else {
            callback("IP格式错误");
          }
        }
      }
    ],
    dip: [
      ...requiredCheck("请输入目的IP"),
      {
        validator: (rule, value, callback) => {
          const testOne =
            /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|[12]?[0-9])$/;
          const rangeRegex =
            /^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)-((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;
          if(value?.includes("-")) {
            callback("IP格式错误");
          }
          if (value?.includes("/")) {
            if (testOne.test(value)) {
              callback();
            } else {
              callback("IP格式错误");
            }
          }
          if (singleIpCheckFun(value)) {
            callback();
          } else {
            callback("IP格式错误");
          }
        }
      }
    ],
    sport: [...requiredCheck("请输入源端口"), { validator: validatePortCheck }],
    dport: [...requiredCheck("请输入目的端口"), { validator: validatePortCheck }]
  },
  defaultData: {
    ipproto: "0"
  }
});
const ifaces = ref([]);

async function getIface() {
  try {
    const res = await ifaceAll();
    console.log(res);
    if (res) {
      ifaces.value = Object.values(res);
      console.log(ifaces.value);
    }
    Object.values(res);
  } catch (error) {}
}

async function submitCb() {
  await submit({
    addApi: addData,
    updateApi: editData,
    sendData: {
      name: updateFormData.name,
      state: 1,
      ipproto: updateFormData.ipproto,
      sip: updateFormData.sip,
      dip: updateFormData.dip,
      sport: updateFormData.sport,
      dport: updateFormData.dport,
      id: updateFormData?.id
    }
  });
  emits("success");
}
</script>

<template>
  <div
    class="update-form mg-r-sm"
    style="display: inline-block; height: 53px"
    @click="
      openHandle({
        row: {
          ...rowData
        },
        id: props.rowData?.id
      });

      getIface();
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="550px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="线路" prop="name">
            <SelectLinksInput width="140px" isName placeholder="请选择线路" v-model="updateFormData.name" />
          </el-form-item>
          <el-divider style="width: calc(100% - 40px); margin: 15px auto" />
          <div class="h-box">
            <el-form-item label="源IP" prop="sip">
              <el-input style="width: 140px" v-model="updateFormData.sip" auto-complete="off" placeholder="请输入源IP" />
            </el-form-item>
            <el-form-item label="源端口" prop="sport">
              <el-input style="width: 120px" v-model="updateFormData.sport" auto-complete="off" placeholder="请输入源端口" />
            </el-form-item>
          </div>
          <div class="h-box">
            <el-form-item label="目的IP" prop="dip">
              <el-input style="width: 140px" v-model="updateFormData.dip" auto-complete="off" placeholder="请输入目的IP" />
            </el-form-item>
            <el-form-item label="目的端口" prop="dport">
              <el-input style="width: 120px" v-model="updateFormData.dport" auto-complete="off" placeholder="请输入目的端口" />
            </el-form-item>
          </div>
          <el-divider style="width: calc(100% - 40px); margin: 15px auto" />
          <el-form-item label="协议" prop="ipproto">
            <el-radio-group v-model="updateFormData.ipproto">
              <el-radio value="0" label="所有"></el-radio>
              <el-radio value="6" label="TCP"></el-radio>
              <el-radio value="17" label="UDP"></el-radio>
              <el-radio value="1" label="ICMP"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
